<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="员工姓名">
          <el-input
            v-model="formInline.name"
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工手机号">
          <el-input
            v-model="formInline.mobile"
            placeholder="请输入员工手机号"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="时间">
          <el-date-picker v-model="formInline.value" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="punisher">惩罚/奖励规则</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column align="center" label="ID" prop="id" width="70">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="员工姓名"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="员工手机号">
        </el-table-column>
        <el-table-column prop="img" align="center" label="员工头像">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.img"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="count" align="center" label="评级次数">
        </el-table-column>
        <el-table-column prop="address" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[50, 100, 200, 300]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="惩罚/奖励规则"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          :inline="true"
          :model="parameter"
          class="demo-form-inline"
          label-width="100px"
          :rules="rules"
          ref="ruleForm"
        >
          <div class="divFlex">
            <el-form-item label="">
              <el-input
                value="1"
                placeholder="请输入数量"
                disabled
                style="width: 100px; text-align: center"
                class="PunishmentNums"
              ></el-input
              >个
            </el-form-item>

            <el-form-item label="差评扣除" prop="value">
              <el-input
                v-model="parameter.value"
                placeholder="请输入金额"
                style="width: 150px"
              ></el-input
              >元
            </el-form-item>
          </div>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="particulars"
      width="60%"
      :before-close="handleClose"
    >
      <el-tabs
        type="border-card"
        v-model="activeName"
        @tab-click="tabssevaluate"
      >
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="好评" name="1"></el-tab-pane>
        <el-tab-pane label="差评" name="2"></el-tab-pane>
        <el-table :data="partiData" max-height="600" border style="width: 100%">
          <el-table-column align="center" label="ID" prop="id" width="70">
          </el-table-column>
          <el-table-column
            prop="order_id"
            align="center"
            label="订单号"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="name" align="center" label="用户名" width="">
          </el-table-column>
          <el-table-column
            prop="ctime_text"
            align="center"
            label="评价时间"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="status_text" align="center" label="评价类型">
          </el-table-column>
          <el-table-column
            prop="content"
            show-overflow-tooltip
            align="center"
            label="评价内容"
          >
          </el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="details(scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="openpinglunVisible(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>

      <span>
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="page2"
          :page-sizes="[10, 100, 200, 300]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
        >
        </el-pagination>
      </span>
      <el-dialog width="40%" :visible.sync="innerVisible" append-to-body>
        <el-form ref="form" :model="detailsData" label-width="80px">
          <span class="divMag">用户名:{{ detailsData.name }}</span>
          <el-form-item label="评价内容" class="ItemMag">
            {{ detailsData.content }}
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">返 回</el-button>
        </span>
      </el-dialog>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="pinglunVisible"
      width="30%"
      :before-close="handlePinglunClose"
    >
      <span>确定删除评论？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlePinglunClose">取 消</el-button>
        <el-button type="primary" @click="deletes">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { pingList, evalList, deleteEvaluate } from "../../../../utils/api";
import {
  getRewardsPunishments,
  editRewardsPunishments,
} from "../../../../utils/main";
export default {
  data() {
    return {
      obj_id: "",
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      particulars: false,
      innerVisible: false,
      formInline: {
        value: "",
        name: "",
        mobile: "",
      },
      imgHeader: this.Global.imgHeader,

      tableData: [],
      partiData: [],
      parameter: {},
      detailsData: {},
      total: 0,
      limit: 10,
      page: 1,
      total2: 0,
      limit2: 10,
      page2: 1,
      value: "",
      estatus: "",
      activeName: "0",
      pinglunVisible: false,
      deleteId: -1,
      tbj_bad_price: "",
      rules: {
        value: [
          { required: true, message: "请输入差评扣除钱数", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              if (!reg.test(value)) {
                callback(new Error("请输入大于0且不超过两位小数的数字"));
              }
              if (value > 100) {
                callback(new Error("不能大于100"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    openpinglunVisible(row) {
      this.pinglunVisible = true;
      this.deleteId = row.id;
    },
    handlePinglunClose() {
      this.deleteId = -1;
      this.pinglunVisible = false;
    },
    deletes() {
      deleteEvaluate(this.token, this.deleteId).then((res) => {
        if (res.data.status) {
          this.pinglunVisible = false;
          this.pingLists(this.obj_id);
          this.$message({
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    tabssevaluate(tab, event) {
      if (tab.index == 0) {
        this.estatus = "";
      }
      if (tab.index == 1) {
        this.estatus = 1;
      }
      if (tab.index == 2) {
        this.estatus = 2;
      }
      this.pingLists(this.obj_id);
    },
    //查询
    onSubmit() {
      this.page = 1;
      this.evalLists();
    },
    onReset() {
      (this.formInline.mobile = ""), (this.formInline.name = "");
      this.evalLists();
    },
    //添加
    punisher() {
      this.getRule();
      this.dialogVisible = true;
    },
    //详情
    handleEdit(row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.obj_id = obj.id;
      this.estatus = "";
      this.activeName = "0";
      this.pingLists(this.obj_id);
      this.particulars = true;
    },
    details(row) {
      this.detailsData = row;
      this.innerVisible = true;
    },
    //序号
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    indexOd(index) {
      if (this.total2 < this.limit2) {
        return this.total2 - index;
      } else {
        return this.total2 - (this.page2 - 1) * this.limit2 - index;
      }
    },
    //关闭
    handleClose(done) {
      done();
      this.page2 = 1;
      this.evalLists();
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      this.evalLists();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      this.evalLists();
    },
    //条数
    handleSizeChange2(val) {
      this.limit2 = val;
      this.pingLists(this.obj_id);
    },
    //页数
    handleCurrentChange2(val) {
      this.page2 = val;
      this.pingLists(this.obj_id);
    },
    // 获取奖惩规则
    async getRule() {
      // this.loading = true;
      let res = await getRewardsPunishments(this.token);
      if (res.data.status) {
        this.parameter = res.data.data.tbj_bad_price;
        // this.tableData = res.data.data.data || [];
        // this.total = res.data.data.count;
        // console.log(this.total, shouchu);
        // let timer = setTimeout(() => {
        //   this.loading = false;
        //   clearTimeout(timer);
        // }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
    // 编辑奖惩规则
    save() {
      this.tbj_bad_price = this.parameter.value;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          editRewardsPunishments(this.token, this.tbj_bad_price).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "修改成功",
              });
              this.dialogVisible = false;
              this.getRule();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    // 详情
    pingLists(id) {
      this.loading = true;
      pingList(
        this.token,
        this.page2,
        this.limit2,
        this.value,
        id,
        this.estatus
      )
        .then((res) => {
          if (res.data.status) {
            this.partiData = res.data.data.data;
            this.total2 = res.data.data.count;
            let date;
            let y, m, d, hh, mm, ss;
            this.partiData.forEach((item) => {
              date = new Date(item.ctime * 1000);
              y = date.getFullYear();
              m = date.getMonth() + 1;
              d = date.getDate();
              hh = date.getHours();
              mm = date.getMinutes();
              ss = date.getSeconds();
              m = m > 9 ? m : "0" + m;
              d = d > 9 ? d : "0" + d;
              hh = hh > 9 ? hh : "0" + hh;
              mm = mm > 9 ? mm : "0" + mm;
              ss = ss > 9 ? ss : "0" + ss;
              item.ctime_text =
                y + "-" + m + "-" + d + " " + hh + ":" + mm + ":" + ss;
              if (item.status == 1) {
                item.status_text = "好评";
              }
              if (item.status == 0) {
                item.status_text = "差评";
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //评价列表
    evalLists() {
      this.loading = true;
      evalList(
        this.token,
        this.page,
        this.limit,
        this.formInline.value,
        this.formInline.mobile,
        this.formInline.name
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData = res.data.msg.data;
            this.total = res.data.msg.count;
            this.tableData.forEach((item) => {
              if (item.avatar) {
                item.image = item.avatar;
                item.img = this.imgHeader + item.avatar;
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
  },
  mounted() {
    this.evalLists();
    this.getRule();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.DivFor {
  border: 1px solid #c1bfbf;
  padding: 20px 20px;
  margin-top: 20px;
}

.item {
  margin-bottom: 18px;
}

.margin-top {
  margin-top: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.DivFlex {
  display: flex;
}

.ItemMag {
  margin-top: 40px;
}

.divFlex {
  display: flex;
  align-items: center;
}

.divMag {
  font-size: 17px;
  margin-left: 10px;
}

.spanMag {
  margin-bottom: 40px;
  width: 60%;
  height: 40%;
  border: 1px solid #f50909;
}
/deep/.PunishmentNums .el-input__inner {
  text-align: center;
}
</style>